Barra lateral de desplazamiento (Scroll) : Gem@ BLOG

casinotito me preguntaba la forma de añadir una barra de scroll lateral y vamos a añadirla, comenzamos añadiendo los estilos de la barra, nos situamos antes de ]]></b:skin> y añadimos:


.controlup {
top:0;
left:0;
background: #E44B98; /* ---- color de la barra ---- */
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}
.controldown {
bottom:0;
left:0;
background: #E44B98;  /* ---- color de la barra ---- */
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}

Y después de ]]></b:skin>


<script type='text/javascript'>
function pageScroll() {
window.scrollBy(0,50); scrolldelay = setTimeout(&#39;pageScroll()&#39;,10); }
function stopScroll() {
clearTimeout(scrolldelay);
}
function pageScrollup() {
parent.scrollBy(0,-50); 
scrolldelay = setTimeout(&#39;pageScrollup()&#39;,10); 
}
</script>

Por último añadimos después de <body>


<input class='controlup' onmouseout='stopScroll()' onmouseover='pageScrollup()' type='button' value=''/>
<input class='controldown' onmouseout='stopScroll()' onmouseover='pageScroll()' type='button' value=''/>

Podemos ver el ejemplo en este blog de pruebas.

Anónimo: No entiendo la barra...
Un sitio de ejemplo?; 31.3.10
Unknown: bueno muchisimas gracias,ahora lo voy a ser y te digo como queda,ha otra cosa me encanta las letras que estan en los comentarios(las letras rojas)si podes decime cual es la fuente y como insertarlas,bueno cariños desde mar del plata argentina; 31.3.10
Unknown: lamentablemente lo hice dos veces por si me habia equivocado,pero no tuve ningun resultado en la vista previa,ahora no sera que lo tapa el fondo que tengo en el blog fijate,http://casinotito.blogspot.com/; 31.3.10
..NaNy..: Hola muy interesante, a mi me gustaría poner una abajo se puede, y sí se puede me dices como se hace. Saludos y gracias; 31.3.10
..NaNy..: Yo otra vez yo me refiero a la barra azul que sube y baja pues la quiero abajo para que valla de izquierda y al revés. Saludos; 31.3.10
Gem@: :: Waldo olvidé poner el enlace al ejemplo, ya está subsanado.

:: casinotito la imagen de fond no tiene por qué interferir pero tendría que verlo añadido para saber lo que es.

:: ..NaNy.. esa barra azul horizontal aparece cuando la página que estamos viendo es de mayor anchura que nuestra resolución de pantalla.; 31.3.10
Vku: no conocía este sistema esta muy original; 1.4.10
Gem@: :: Tiene ya algún tiempo Vku (ahora si te veo :) ); 1.4.10
Filigrana: Hola Gema! Muy interesante, te juro que ayer buscaba como hacer algo similar!
Te molesto con una duda que tengo: como puedo hacer para que el color o fondo de una sidebar, llegue hasta abajo? Me refiero a que no se ajuste a la cantidad de widgets sino que al largo de las entradas. Porque por ejemplo si le pongo un largo fijo, digamos 500px, y la entrada que estoy viendo tiene 200px de alto, me queda el footer muy lejano, me explico? Espero que si:)
Traté de resolverlo mirando plantillas pero no hay forma! Espero puedas ayudarme.
Gracias!; 1.4.10
La hormiguita: Gracias muy ùtil, el problema que esto se va instalar en todas las entradas y si yo quiero poner el alguna leer mas? o otra es cortita y no necesita la barra? Se puede selecionar la entrada?; 1.4.10
Gem@: :: Filigrana es complicado eso que deseas hacer a no ser que lo hagas con imágenes, igual hay otras soluciones pero lo que yo hice fue en la sidebar añadir un padding excesivo para que cubriera hasta completar el largo de las entradas.
Algo así padding: 5px 20px 470px 22px;
El problema es que cuando vas actualizando no siempre tienen el mismo largo pero puede ir modificándose porque es cuestión de aumentar o disminuir un valor.
Mira este ejemplo:
http://bluewatermenu.blogspot.com/

:: La hormiguita no se instala en las entradas sino en el extremo del blog, no afecta para nada el sistema de leer más, la función que tiene es la misma que esas imágenes estáticas como el TOP que hay en este blog.; 1.4.10
Mercier mc: Hola Gema :)

Me preguntaba cómo consigues colocar esas pestañas de css, javascrip, html... encima de las cajas de contenido donde aparecen los códigos.

Gracias :); 2.4.10
Mercier mc: Tenia otra pregunta pero se me ha pasado

Quiero incrustar el formulario de comentarios después de la entrada, así que voy en Configuración - Comentarios - Entrada incrustada a continuación. Pero me dice que el formulario de comentario incrustado no se puede utilizar si está inhabilitado "Publicar páginas".

Entonces, me dirijo a Archivo - Habilitar páginas de entrada y la opción de decir Sí o No está gris, bloqueada, sin que pueda desplegar las opciones.

¿ Puedes ayudarme ?
Muchísimas gracias; 2.4.10
Unknown: hola ya viste mi plantilla que te mande por email,para saber porque no me funciona el efecto
barra de scroll lateral izquierda?; 2.4.10
Karla Castañeda: Este comentario ha sido eliminado por el autor.; 2.4.10
Karla Castañeda: Este comentario ha sido eliminado por el autor.; 2.4.10
Karla Castañeda: Hola Gemita

Tube un problemilla peroafortunadamente ya lo arreglé, por eso borré los comentarios , para no acatarrarte jaja..

;)Besos; 2.4.10
Patán: Hola Gem@. como estas, yo acá en Chile, reponiendome del terremoto...saludos.......; 3.4.10
Gem@: :: Mercier mc esas imágenes están ubicadas con cs, es largo para explicar en un comentario, si te parece hago una entrada sobre ese tema para la semana que viene :)
Lo que dices del formulario mira la siguiente entrada que te será de ayuda:
http://gemablog-.blogspot.com/2008/07/formulario-de-comentarios-en-blogger.html

:: casinotito donde tengo que verlo es en tu blog pero a simple vista la única diferencia entre tu plantilla y la que yo he usado para el ejemplo es la barra de Blogger prueba a suprimirla y vemos si es eso.

:: Me he dado cuenta Karla, gracias por avisarme :D

:: Saludos Patán me alegra verte y que estés bien, espero que todo vuelva pronto a la normalidad.; 3.4.10
Unknown: bueno saque la barra como me indicaste y hice todo el truco,dejo hasta que me contestes como quedo,aparece arriba dos botones cuadrados,fijate ahora y me decis,ok saludos; 3.4.10
Gem@: :: Pues yo sigo viendo la barra casinotito :S; 4.4.10
Unknown: gracias,pero ya decidi no ponerla,me canse de probar,igual te agradesco mucho,saludos; 4.4.10
Gem@: :: Como quieras casinotito.; 4.4.10
Filigrana: Gema! He estado muy ocupada y, entre otras cosas, dejé "descolgados" agradecimientos :) Por eso ahora vengo a agradecerte tu ayuda con lo del sidebar!
Te cuento que me han invitado a formar parte de una revista digital, y les ofrecí hacer un blog por todas las ventajas que tiene. Lo estoy armando y le pongo de todo jaja todo lo que aprendí en este tiempo le estoy poniendo a ese blog! Asique te quería agradecer porque la mayoría de las cosas las aprendí acá.
Gracias por todo!; 4.5.10
Gem@: :: Gracias a ti Filigrana, espero que ese blog quede bien lindo como todos los que haces y me alegra mucho que tengas nuevas iniciativas.
Por la ausencia no te preocupes lo primero, es lo primero siempre :); 4.5.10
Unknown: Gracias por tu ayuda :); 16.5.10